<!-- 银行选择组件 -->
<template>
	<u-popup @open="getList" @close="showClick" closeable v-model="props.modelValue" mode="bottom" border-radius="24"
		length="60%">
		<view class="Model">
			<view class="u-text-center u-font-lg u-p-t-26 u-p-b-26">
				<block v-if="type==1">选择银行</block>
				<block v-else>选择支行</block>
			</view>
			<view class="u-p-l-26 u-p-r-26">
				<u-search :show-action='false' placeholder="请输入银行名称" v-model="bankName" @change="searchFn"></u-search>
			</view>
			<view class="u-p-t-42" v-if="bankList.length==0">
				<u-empty text="暂无可选银行"></u-empty>
			</view>

			<block v-else>
				<block v-if="props.type==1">
					<scroll-view :scroll-y="true" >
						<u-cell-group>
							<u-cell-item @click="seleBank(item)" :title="item.bankName" v-for="(item,index) in list"
								:key="index"></u-cell-item>
						</u-cell-group>
					</scroll-view>
				</block>
				<block v-else>
					<scroll-view :scroll-y="true" >
						<u-cell-group>
							<u-cell-item @click="seleBank(item)" :title="item.branchName" v-for="(item,index) in bankList" :key="index"></u-cell-item>
						</u-cell-group>
					</scroll-view>
				</block>
			</block>




		</view>
	</u-popup>
</template>

<script setup lang="ts">
	import { computed, ref } from "vue";
	import userApi from '@/api/user'
	const props = defineProps({
		modelValue: {
			type: Boolean,
			default: false
		},
		type: {//1银行 2支行
			type: String || Number,
			default: 1
		},
		Fomr2: {
			type: Object,
		},

	})



	const emits = defineEmits(['update:modelValue', "select"])

	const bankName = ref('')
	const bankList = ref([])

	function showClick() {
		emits('update:modelValue', false)
	}


    function searchFn(){
		if(props.type==2){
			getList()
		}
	}


	function getList() {

		switch (props.type) {
			case '1':
				userApi.listBankCodeAll().then(res => {
					bankList.value = res.data
				})
				break;

			case '2':
				userApi.listBranchCode(Object.assign(props.Fomr2, {
					branchName: bankName.value
				})).then(res => {
					bankList.value = res.data.list
				})
				break;
		}

	}
	function seleBank(item) {
		emits('select', item)
		showClick()
	}

	const list = computed(() => {
		let name = bankName.value;
		return bankList.value.filter(item => item.bankName.indexOf(name) !== -1)
	})
</script>

<style lang="scss" scoped>
	.Model {
		box-sizing: border-box;
		height: 100%;
		display: flex;
		flex-direction: column;

		scroll-view {
			overflow: hidden;
			box-sizing: border-box;
			flex: 1;
		}
	}
</style>
